<!--  -->
<template>
  <div v-show="showSetView">
      <div class="nav bg-theme color-f text-l" >
        <div style="display:flex;flex:2;">
            <i class="iconfont icon-fanhui font19 pl08 iback" @click="gotoMobile"></i>
            <!-- 详情进入 -->
            <span class="font19 ml16">
                {{showTitle}}
            </span>
        </div>
      </div> 
      <van-divider :style="{ fontSize: '10px',padding:'0 20px' ,marginTop:'75px' }">设置昵称，让人更好地记住你</van-divider>
      <div style="display:flex;margin:10px 20px 10px 20px;
            border-radius:20px;height:40px;background:#F4F4F4;margin-bottom:40px">
          <span class="font14" style="line-height:40px;margin-left:20px">昵称<span style="color:#ff0000">*</span></span>
          <div style="width:1px;height:20px;background:#E9E9E9;margin:10px"></div> 
          <input class="font14" style="border: none;padding:0px 0px;background:#F4F4F4" 
             v-model="nickName"/>
      </div>  
      <van-divider :style="{ fontSize: '10px',padding:'0 20px' }">人物形象设计</van-divider>
      <div class="flex_center_h">
          <div class="flex_center_1" @click="changeImg(0)">
                <img :src="getUrl(this.imgList[0].anonymousFilePath)" 
                    class="z_index_img0">
                <!-- <img :src="require('../../assets/images/userimg.png')" 
                    class="z_index_img0">     -->
                <img :src="activeNumber==0?icon.checked:icon.uncheck" class="z_index_img1"/>
          </div>
          <div class="flex_center_1" @click="changeImg(1)">
                <img :src="getUrl(this.imgList[1].anonymousFilePath)" 
                    class="z_index_img0">    
                <img :src="activeNumber==1?icon.checked:icon.uncheck" class="z_index_img1"/>
          </div>
          <div class="flex_center_1" @click="changeImg(2)">
                <img :src="getUrl(this.imgList[2].anonymousFilePath)" 
                    class="z_index_img0">  
                <img :src="activeNumber==2?icon.checked:icon.uncheck" class="z_index_img1"/>
          </div>
          <div class="flex_center_1" @click="changeImg(3)">
                <img :src="getUrl(this.imgList[3].anonymousFilePath)" 
                    class="z_index_img0">
                <img :src="activeNumber==3?icon.checked:icon.uncheck" class="z_index_img1"/>
          </div>
           <div class="flex_center_1" @click="changeImg(4)">
                <img :src="getUrl(this.imgList[4].anonymousFilePath)" 
                    class="z_index_img0">
                <img :src="activeNumber==4?icon.checked:icon.uncheck" class="z_index_img1"/>
          </div>
      </div>
      <div class="flex_center_h" style="margin-top:30px">
          <div class="flex_center_1" @click="changeImg(5)">
                <img :src="getUrl(this.imgList[5].anonymousFilePath)" 
                    class="z_index_img0">
                <img :src="activeNumber==5?icon.checked:icon.uncheck" class="z_index_img1"/>
          </div>
          <div class="flex_center_1" @click="changeImg(6)">
                <img :src="getUrl(this.imgList[6].anonymousFilePath)" 
                    class="z_index_img0">
                <img :src="activeNumber==6?icon.checked:icon.uncheck" class="z_index_img1"/>
          </div>
          <div class="flex_center_1" @click="changeImg(7)">
                <img :src="getUrl(this.imgList[7].anonymousFilePath)" 
                    class="z_index_img0">
                <img :src="activeNumber==7?icon.checked:icon.uncheck" class="z_index_img1"/>
          </div>
           <div class="flex_center_1" @click="changeImg(8)">
                <img :src="getUrl(this.imgList[8].anonymousFilePath)" 
                    class="z_index_img0">
                <img :src="activeNumber==8?icon.checked:icon.uncheck" class="z_index_img1"/>
          </div>
          <div class="flex_center_1" @click="changeImg(9)">
                <img :src="getUrl(this.imgList[9].anonymousFilePath)" 
                    class="z_index_img0">
                <img :src="activeNumber==9?icon.checked:icon.uncheck" class="z_index_img1"/>
          </div>
      </div>
      <div style="display:flex;margin:50px 20px 10px 20px;justify-content:center;
            border-radius:20px;height:40px;background:#F06F3F;margin-bottom:40px" @click="toSubmit()">
          <span class="font14" style="line-height:40px;color:white">下一步</span>
      </div>    
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
import {findCurrentAccount,getDefaultImg,create} from '@/api/gettodo';
import {Notify, Toast ,Dialog} from 'vant';
import { openFileUrl } from '@/store/openFile'
  export default {
    components: {

    },
    data() {
       return {
            showTitle:'员工论坛',
            nickName: "",
            icon: {
                   uncheck:require('../../assets/images/uncheck.png'),
                   checked:require('../../assets/images/checked.png')
                },
            activeNumber: -1,
            showSetView:false,
            imgList:[],
       }
    },
     computed:{
      ...mapGetters(['user'])
    },
    //生命周期--创建完成
    created() {
        this.getUserData()
    },
    //生命周期--挂载完成
    mounted() {
           if (window.history && window.history.pushState) {
                console.log('main点击物理返回键1111');
                history.pushState(null, null, document.URL);
                window.addEventListener('popstate', this.gotoMobile, false);//false阻止默认事件
            }
    },
    //方法调用
    methods: {
        getUrl(value) {
            console.log('图片地址是:'+openFileUrl(value))
            return openFileUrl(value)
        },
        gotoMobile(){
                console.log('main点击物理返回键222'),
                this.moaBridge_ha_djfupt.closeDoc({refresh:false,appcode:'yglt'});
            },
        getUserData(){
            Toast.loading({
            message:'加载中',
            forbidClick:true
            });
            findCurrentAccount(Object.assign({userName:this.user.userName}))
            .then((result)=>{
                Toast.clear()
                if(!result.data){
                    Notify(result.message)
                    return;
                }
                if(result.data.data){
                    this.showSetView=false
                    this.toNext()
                }else{
                    if(result.data.errcode==-1){
                        this.showSetView=true
                        this.showTitle='人物形象设计'
                        this.getImages()
                    }else{
                        Notify(result.message)
                        return;
                    }
                }
            })
        },
        getImages(){
            Toast.loading({
            message:'加载中',
            forbidClick:false
            });
            getDefaultImg(Object.assign({userName:this.user.userName}))
            .then((result)=>{
                Toast.clear()
                if(!result.data){
                    Notify(result.message)
                    return;
                }
                this.imgList=result.data.data
            })
        },
        changeImg(index){
            this.activeNumber=index
        },
        toNext(){
            this.$router.push({
                        name: "mainview",
                    })
        },
        toSubmit(){
            if(this.nickName==""){
                Notify('请输入昵称')
                return
            }
            if(this.activeNumber==-1){
                Notify('请选择默认头像')
                return
            }
            create(Object.assign({userName:this.user.userName}
                ,{nickname:this.nickName}
                ,{imgId:this.imgList[this.activeNumber].id}))
            .then((result)=>{
                Toast.clear()
                if(!result.data){
                    Notify(result.message)
                    return;
                }
                if(result.data.data){
                    Notify({type:'success',message:'注册成功'})
                    this.$router.push({
                        name: "mainview",
                    })
                }else{
                    Notify(result.message)
                    return;
                }
            })
            .catch((result)=>{
                Notify('注册失败，请稍后再试')
            })
            
        }
    },
    destroyed () {
        console.log('destroyeddestroyeddestroyed')
        window.removeEventListener('popstate',this.gotoMobile,false);//false阻止默认事件
    },
  }
</script>
<style  scoped>
/* @import url();*/
</style>